<template>
  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="currentPageSize"
    :page-sizes="pageSize"
    :small="small"
    :disabled="disabled"
    :background="background"
    :layout="layout"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script lang='ts' setup>
import type { Pagination } from './typing/table'

const props = defineProps<{pagination:Pagination}>()
const { total, layout = 'sizes, prev, pager, next, jumper', pageSize = [10, 20, 30, 50], disabled, small, background, currentPage = 1, currentPageSize = 20 } = toRefs(reactive({
  ...props.pagination,
}))
const emit = defineEmits(['handleSizeChange', 'handleCurrentPageChange'])

const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  emit('handleSizeChange', val)
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  emit('handleCurrentPageChange', val)
}

</script>
<style lang='scss' scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
